<template>
  <van-form @submit="onSubmit">
       <!-- 文章标题 -->
        <van-field
          v-model="username"
          name="用户名"
          label="文章标题"
          placeholder="请输入文章内容"
          :rules="[{ required: true, message: '请输入文章内容' }]"
        />
        <!-- 文章分类 -->
         <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            label="文章分类"
            placeholder="请选择文章分类"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>

        <van-field
            readonly
            clickable
            name="picker"
            :value="value2"
            label="文章标签"
            placeholder="请选择文章标签"
            @click="showPicker2 = true"
          />
          <van-popup  v-model="showPicker2" position="bottom" close-icon="close"  :style="{ height: '30%' }" closeable>
            <div class="tags-popup">
              <h3>请选择标签</h3>
              <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
                <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
                <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
                <van-checkbox name="3" shape="square">复选框 3</van-checkbox>
                <van-checkbox name="4" shape="square">复选框 4</van-checkbox>
              </van-checkbox-group>
            </div>
          </van-popup>  
        <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader v-model="uploader" />
          </template>
        </van-field>
         <van-field
            v-model="message"
            rows="4"
            autosize
            label="文章正文"
            type="textarea"
            placeholder="请输入正文内容"
          />
          <br><br>
          <van-row type="flex" justify="space-around">
            <van-button icon="plus" type="primary">发布</van-button>
            <van-button icon="send-gift-o" type="info">存草稿</van-button>
            <van-button icon="revoke" type="danger">重置</van-button>
          </van-row>
        
        
      </van-form>
</template>

<script>
export default {
  data() {
    return {
       value: '',
       value2:'',
      columns: ['分类1', '分类2', '分类3', '分类4', '分类5'],
      showPicker: false,
      showPicker2:false,
      checkboxGroup:[],
      message:''
    }
  },
   methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  },
}
</script>

<style scoped lang="less">
.tags-popup{
  padding: 0 20px;
  h3{
    font-size: 30px;
    font-weight: normal;
    line-height: 100px;
    border-bottom:1px solid #eee;
    margin-bottom: 30px;
  }
}
</style>